<template>
  <main class="step-form-page">
    <div class="top-header-from">
      <h3>分步表单</h3>
      <p>将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</p>
    </div>
    <div class="my-content">
      <el-steps :active="2" align-center>
        <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
        <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
        <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
      </el-steps>
      <div class="deom-input">
        <span>XXX：</span>
        <el-input placeholder="请输入内容" size="small"></el-input>
      </div>
      <div class="deom-input">
        <span>XXXX：</span>
        <el-input size="small" v-model="selectValue" placeholder="请输入内容" class="input-with-select">
          <el-select slot="prepend" v-model="selectValue" placeholder="请选择">
            <el-option label="餐厅名" value="1餐厅名"></el-option>
            <el-option label="订单号" value="2订单号"></el-option>
            <el-option label="用户电话" value="3用户电话"></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="deom-input">
        <span>属性方式：</span>
        <el-input placeholder="请输入内容" size="small"></el-input>
      </div>
      <div class="deom-input">
        <span>描述：</span>
        <el-input 
          placeholder="请输入内容"  
          type="textarea"
          size="small"
          :autosize="{ minRows: 4, maxRows: 6}"
        ></el-input>
      </div>
      <div class="deom-input">
        <span></span>
        <el-button type="primary" size="small">主要按钮</el-button>
      </div>
    </div>
  </main>
</template>
<script>
import Vue from "vue";
import { Steps, Step, Select, Option} from "element-ui";
Vue.use(Step);
Vue.use(Steps);
Vue.use(Select);
Vue.use(Option);
export default {
  Name: "StepForm",
  data(){
    return {
      selectValue:''
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./less/step-form.less");
</style>
<style lang="less">
.step-form-page .el-input-group__prepend{
    width: 100px;
    background-color: #ffffff
}
</style>